<template>
<div>
  <van-search v-model="value" placeholder="搜索商品名称" />
  <van-row>
    <van-col span="6">
      <van-sidebar v-model="activeKey" v-for="item in arr" @change="onChange">
        <van-sidebar-item class="title" :title="item.oneName" />
      </van-sidebar>
    </van-col>
    <van-col span="18">
      <van-tabs  v-model="active">
        <van-tab swipe-threshold="5" :title="item.twoName" v-for="item in arr">
          <hr>
          <b>{{item.twoName}}</b>
            <p v-for="spu in item.spuList ">
              <van-card
                  :price="spu.price"
                  :title="spu.spuName"
                  :thumb="spu.picture"
              >
                <template #tags>
                  <van-tag plain type="danger">标签</van-tag>
                  <van-tag plain type="danger">标签</van-tag>
                </template>
              </van-card>
            </p>
        </van-tab>
      </van-tabs>
    </van-col>
  </van-row>
</div>
</template>

<script>
import { Notify } from 'vant';


export default {
  data() {
    return {
      value: '',
      activeKey:0,
      active: 0,
      arr: [
          {
        oneName:'xiaomi手机',
        twoName:'xiaomi civi',
        spuList:[{
          spuName:'xiaomi civi2',
          price:'2999.0',
          picture:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?w=800&h=800'
        }]
      },
        {
          oneName:'苹果手机',
          twoName:'xiaomi civi2',
          spuList:[{
            spuName:'xiaomi civi2',
            price:'3999',
            picture:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800'
          }]
        },
        {
          oneName:'华为手机',
          twoName:'xiaomi civi3',
          spuList:[{
            spuName:'xiaomi civi2',
            price:'4999',
            picture:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b127cc0b8ace12de00bbb6b55613e266.png?w=800&h=800'
          }]
        },
        {
          oneName:'华为手机',
          twoName:'xiaomi civi3',
          spuList:[{
            spuName:'xiaomi civi2',
            price:'5999',
            picture:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b127cc0b8ace12de00bbb6b55613e266.png?w=800&h=800'
          }]
        },
        {
          oneName:'华为手机',
          twoName:'xiaomi civi3',
          spuList:[{
            spuName:'xiaomi civi2',
            price:'6999',
            picture:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b127cc0b8ace12de00bbb6b55613e266.png?w=800&h=800'
          }]
        },
        {
          oneName:'华为手机',
          twoName:'xiaomi civi3',
          spuList:[{
            spuName:'xiaomi civi2',
            price:'7999',
            picture:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b127cc0b8ace12de00bbb6b55613e266.png?w=800&h=800'
          }]
        }
      ],
    };
  },
  methods: {
    onChange(index) {
      Notify({type: 'primary', message: index});
    },
  }
}
</script>

<style scoped>
.title{
  background-color: white;
}
</style>